<template>
    <div style="width:100%;height:100%;">
        <div class="head-box">
            <div class="platform-title"><router-link to="/">{{platform_title}}</router-link></div>
            <!-- <button class="switch-menu" @click="switchMenu">···</button> -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item v-for="(item , index) in nowRoute" :key="index" :to="{ path: item.route }">{{ item.name }}</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="user-name">
                <el-dropdown size="small" @command="loginOut">
                    <span class="el-dropdown-link">
                        {{ user_name }}
                    </span>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>退出登录</el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div :style="{ width:menuWidth,height:menuHeight }" class="menu-box">
            <el-menu :default-active="menu_default_active" class="el-menu-vertical-demo" background-color="#1c2b36"
            text-color="#869fb1" :collapse="menuIsOpen" active-text-color="#ffffff" router>
                <el-menu-item v-for="(item , index) in menu_list" :key="index" :index="item.route" v-if="item.child == undefined" :route="item.route" @click="getRouteInfo(item,1)">
                    <i :class="item.icon"></i>
                    <span slot="title">{{ item.name }}</span>
                </el-menu-item>
                <el-submenu v-else :index="index.toString()">
                    <template slot="title">
                    <i :class="item.icon"></i>
                    <span>{{ item.name }}</span>
                    </template>
                    <el-menu-item v-for="(mid , midIndex) in item.child" :key="midIndex" :index="mid.route" v-if="mid.child == undefined" :route="mid.route" @click="getRouteInfo(mid,1)">
                    <i class="el-ali-lianjie"></i>
                    <span>{{ mid.name }}</span>
                    </el-menu-item>
                    <el-submenu v-else :index="index.toString()+'-'+midIndex.toString()">
                    <template slot="title">
                        {{ mid.name }}
                    </template>
                    <el-menu-item v-for="(min , minIndex) in mid.child" :key="minIndex" :index="min.route" :route="min.route">
                        {{ min.name }}
                    </el-menu-item>
                    </el-submenu>
                </el-submenu>
            </el-menu>
        </div>
        <div :style="{ width:pageWidth,paddingLeft:menuWidth,height:menuHeight }" class="page-box">
            <router-view :nowRoute="nowRoute"></router-view>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                platform_title:'大乙后台管理平台',
                page_name: '首页',
                menuIsOpen:false,
                menu_list:[
                    {
                        "name":"首页",
                        "icon":"el-ali-shouye",
                        "child":[],
                        "route":"/admin",
                    },
                ],
                menuHeight:'',
                menuWidth:'16%',
                pageWidth:'84%',
                user_name:'',
                is_login:0,
                nowRoute:[],
                menu_default_active:'',
                role_list:'',
            }
        },
        created(){
            let height = window.innerHeight
            this.menuHeight = height-50+'px'
            this.getUserInfo()
        },
        mounted(){
            const that = this
            window.onresize = function temp(){
                that.menuHeight = `${window.innerHeight-50}px`
            }
        },
        metaInfo:{
            title:'大乙科技服务平台',
            meta:[{
                name:'大乙科技服务平台',
                content: '大乙科技服务平台-content'
            }]
        },
        methods: {
            getActive(){
                let path = this.$route.path.split('/')
                for(let value of this.menu_list){
                    if(!value.route){
                        for(let min of value.child){
                            if(min.route == "/"+path[1]){
                                this.menu_default_active = "/"+path[1]
                            }
                        }
                    }else{
                        if(value.route == "/"+path[1]){
                            this.menu_default_active = "/"+path[1]
                        }
                    }
                }
            },
            getUserInfo(){
                this.$axios({
                    url: this.$url.indexUserInfo,
                    headers:{
                        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
                    },
                    method:'get',
                    data:{}
                }).then(response=>{
                    if(response.data.result.success){
                        this.user_name = response.data.content
                        this.is_login = 1
                        this.$store.commit('setUserName',response.data.content)
                    }else{
                        if(response.data.result.errorCode == 409){
                            this.$router.push({name:'login',params:{ type:'blacklist' }})
                        }
                    }
                }).catch(error=>{
                    console.log(error);
                })
                this.$axios({
                    url: this.$url.current_role,
                    method:'get',
                }).then(response=>{
                    if(response.data.result.success){
                        this.role_list = response.data.content.role_node.split(',')
                        this.getAllNode()
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            getAllNode(){
                this.$axios({
                    url: this.$url.node,
                    method:'get',
                    data:{
                        type:0
                    }
                }).then(response=>{
                    if(response.data.result.success){
                        let option = []
                        for(let value of response.data.content){
                            if(value.pid == 0){
                                if(this.in_array(this.role_list,value.id)){
                                    option.push(value)
                                }
                            }else{
                                for(let mid of option){
                                    if(mid.id == value.pid){
                                        // console.log(mid['child'])
                                        if(mid['child'] == undefined){
                                            if(this.in_array(this.role_list,value.id)){
                                                mid['child'] = []
                                                mid['child'].push(value)
                                            }
                                        }else{
                                            if(this.in_array(this.role_list,value.id)){
                                                mid['child'].push(value)
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        this.menu_list = option
                        this.getActive()
                    }
                }).catch(error=>{
                    console.log(error);
                })
            },
            in_array(array,element) { 
            　　for (var i = 0; i < array.length; i++) { 
            　　    if (array[i] == element) { 
            　　        return true; 
                    } 
                }
                return false; 
            },
            loginOut(command){
                this.$axios({
                    url:this.$url.loginOut,
                    headers:{
                        "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
                    },
                    method:'post',
                    data:{}
                }).then(response=>{
                    if(response.data.result.success){
                        this.$router.push('/login')
                        this.$store.commit('logout')
                        this.user_name = '登录'
                        this.is_login = 0
                    }else{
                        this.$notify.error({
                            title: '错误',
                            message: response.data.result.errorMsg
                        });
                    }
                }).catch(error=>{
                    console.log(error)
                })
            },
            getRouteInfo(item,level){
                if(level == 1){
                    this.nowRoute = []
                    this.nowRoute.push({"name":item.name,"route":item.route})
                }
            },
            switchMenu(){
                if(this.menuIsOpen){
                    this.menuIsOpen = false
                    this.menuWidth = '16%'
                    this.pageWidth = '84%'
                }else{
                    this.menuIsOpen = true
                    this.menuWidth = '64px'
                    let width = window.innerWidth
                    this.pageWidth = width-64+'px'
                }
            }
        },
        watch:{
            '$route':(to,from)=>{
                console.log('switch')
                // this.getUserInfo()
            }
        },
    }
</script>

<style scoped>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
        height: 100%;
        border-right:0px;
    }
    .menu-box{
        -ms-overflow-style:none;
        overflow-y: scroll;
        /* overflow:-moz-scrollbars-none; */
        position: fixed;
        top:50px;
        left:0;
    }
    .menu-box::-webkit-scrollbar{
        width:0px;
    }
    .menu-box .el-menu--collapse{
        height:100%;
    }
    .head-box{
        position: fixed;
        left:0;
        top:0;
        width: 100%;
        height:50px;
        transition: all 0.5s;
        background-color: rgb(28, 43, 54);
        z-index: 2000;
    }
    .page-title{
        height:50px;
        box-shadow: 0 0 5px black;
    }
    .platform-title{
        height:50px;
        width: 16%;
        color:#fff;
        text-align: center;
        line-height:50px;
        display: inline-block;
    }
    .switch-menu{
        background-color: #409eff;
        border:none;
        outline: none;
        color:#fff;
        border-radius: 3px;
        cursor: pointer;
        margin-top:-5px;
    }
    .el-breadcrumb{
        display: inline-block;
    }
    .page-box{
        background-color:#f0f3f4;
        padding-top:50px;
    }
    .user-name{
        float: right;
        line-height:50px;
        margin-right:20px;
        cursor: pointer;
    }
</style>
<style>
    .head-box .el-breadcrumb__inner{
        color:#fff!important;
    }
    .head-box .el-dropdown{
        color:#fff!important;
    }
    .menu-box .el-submenu .el-menu-item{
        min-width: unset;
    }
    .pagination-box {
        text-align: center;
        box-sizing: border-box;
        margin-top: 20px;
    }
</style>
